<template>
  <div class="personal container">
    <h2 class="user">个人管理</h2>
    <el-tabs
      ref="tabs"
      v-model="activeName"
      @tab-click="handleClick"
      class="tabs"
    >
      <el-tab-pane label="已审案件" name="first" class="tab-item">
        <!-- <Left></Left>
        <div class="right ml40">
          <Case></Case> 
        </div>-->
        <haveCasesView></haveCasesView>
      </el-tab-pane>
      <el-tab-pane label="标注案件" name="second" class="tab-item">
        <!-- <Left></Left>
        <div class="right ml40"></div> -->
        <!-- <Tagging></Tagging> -->
        <personalLablesCasesView></personalLablesCasesView>
      </el-tab-pane>
      <el-tab-pane label="点赞案件" name="third" class="tab-item">
        <personalLikeCasesView></personalLikeCasesView>
        <!-- <Left></Left>
        <div class="right ml40">
          <Case></Case>
        </div> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import haveCasesView from "../haveCases/index.vue";
import personalLikeCasesView from "../personalLikeCases/index.vue";
import personalLablesCasesView from "../personalLables/index.vue";
import Left from "../common/Left.vue";
import Tagging from "../common/Tagging.vue";
import Case from "../common/Case.vue";
import { haveCases } from "@api/details";
export default {
  components: {
    Left,
    Tagging,
    Case,
    haveCasesView,
    personalLikeCasesView,
    personalLablesCasesView
  },
  data() {
    return {
      activeName: "first"
    };
  },
  methods: {
    handleClick(tab, event) {
      this.$nextTick(() => {
        this.$refs.tabs.$children[0].$children[0].$el.style.transform = `translateX(${event.target.offsetLeft}px)`;
      });
    },
    /* 获取已审案件data*/
    async _haveCases() {
      const { data } = await haveCases({
        // fushen,wuxiao,susong,waiguan
        dataSource: "susong",
        anjianjl: "",
        heyizsf: "",
        page: "1",
        size: "10",
        sortField: ""
      });
      this.haveCasesData = data || {};
    }
  },
  mounted() {
    this.$nextTick(() => {
      let tabItem = document.getElementById(`tab-${this.$refs.tabs.value}`);
      this.$refs.tabs.$children[0].$children[0].$el.style.transform = `translateX(${tabItem.offsetLeft}px)`;
      // this._haveCases();
    });
  }
};
</script>
<style>
.el-tabs__header {
  margin-bottom: 20px;
  margin-top: 10px;
}
</style>
<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}
.personal {
  font-family: 微软雅黑;
  font-size: 14px;
  color: #303133;
  .user {
    font-size: 24px;
    font-weight: normal;
    margin: 17px 0 0 0;
  }
}
::v-deep .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #c0c4cc;
}
::v-deep .el-tag--small {
  line-height: 26px;
  height: 26px;
  font-size: 14px;
}
::v-deep .bold {
  font-weight: bold;
}
::v-deep .e-medium,
::v-deep .el-button {
  padding: 10px 10px;
  font-size: 14px;
}
::v-deep .el-input__inner {
  background-color: #fafafa;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
}
::v-deep .el-tabs__item {
  font-size: 16px;
  text-align: center;
  width: 85px !important;
  padding: 0;
  margin-right: 20px;
}
::v-deep .el-tabs__active-bar {
  height: 4px;
  width: 85px !important;
}
::v-deep .arrow-dwon {
  transform: rotate(90deg);
}
::v-deep .arrow-up {
  transform: rotate(-90deg);
}
::v-deep .el-input__icon {
  line-height: 35px;
}
::v-deep .el-tag {
  border: 0;
}
.tab-item {
  display: flex;
}
.right {
  flex: 1;
}
.ml40 {
  margin-left: 40px;
}
</style>
